{mtemplate '_header_base'}
<style type="text/css">
    body, html{
        max-width: 100% !important;
        min-width: 100% !important;
        height: auto!important;
    }
    .dm-navbar-header{
        left: 0;
        width: 100%;
    }
    .bell-content{
        position: relative;
        display: block;
        margin-left: 0px;
        margin-top: 60px;
        padding: 20px;
    }
    .show-box{
        display: flex;
        height: calc(100vh - 100px);
    }
    .show-number{
        flex: 1;
        position: relative;
    }
    .show-number .title{
        font-size: 24px;
        padding-left: 20px;
        text-align: center;
    }
    .show-number:last-child{
        border-left: 1px solid #e2e2e2;
        padding-left: 40px;
    }
    .show-number .content{
        margin-top: 25px;
    }
    .show-number .content span{
        font-size: 40px;
        margin-right: 30px;
        margin-bottom: 30px;
        display: inline-block;
    }
</style>
{if !empty($_W['deam_food']['manage']['uid'])}
<div class="dm-navbar-header">
    <ul>
        <span class="store-name">{$storeinfo['name']}</span>
        <li class="dropdown">
            <a class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false">{$_W['deam_food']['manage']['username']}<span></span></a>
            <ul class="dropdown-menu">
                <!-- <li class="divider"></li> -->
                <li><a onclick="return confirm('确定退出登录？');return false;" href="{php echo manage_url(array('r'=>'user','ac'=>'logout'))}"> 退出登录</a></li>
            </ul>
        </li>
    </ul>
</div>
{/if}
<div class="bell-content">
    <div class="show-box">
        <div class="show-number">
            <div class="title">准备中</div>
            <div class="content type0">
            </div>
        </div>
        <div class="show-number">
            <div class="title">请取餐</div>
            <div class="content type1">
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    layui.use(['element', 'layer'], function() {
        var element = layui.element, layer = layui.layer;
        var code = '';
        $(document).keydown(function (event) {
            code += String.fromCharCode(event.keyCode);
            if (event.keyCode == 13) {
                $.ajax({
                    "url": "{php echo manage_url(array('r'=>'bell','ac'=>'show_number','op'=>'deal'))}",
                    dataType: "json",
                    cache: false,
                    data: {
                        code: code
                    },
                    beforeSend: function () {

                    },
                    success: function (data) {
                        if (data.status == '1') {
                            getAllList();
                        }
                    }
                });
                code = "";
                return;
            }
        });
        var getAllList = function () {
            $.ajax({
                "url": "{php echo manage_url(array('r'=>'bell','ac'=>'show_number','op'=>'get_list'))}",
                dataType: "json",
                cache: false,
                beforeSend:function(){

                },
                success:function(data){
                    if(data.status == '1'){
                        $('.type0,.type1').html('');
                        data.result.type0.forEach(function (elem, index) {
                            $('.type0').prepend("<span>" + elem.order_number + "</span>");
                        });
                        data.result.type1.forEach(function (elem, index) {
                            $('.type1').append("<span>" + elem.order_number + "</span>");
                        });
                    }
                }
            });
            setTimeout(function () {
                getAllList()
            },10000);
        }
        getAllList();

    });
</script>
</body>
</html>